import React, { useEffect, useState } from "react";
import { Search, Toast } from "react-vant";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const [value, setValue] = useState("");
  const [searchList, setSearchList] = useState([]);
  const render = () => {
    axios.get("/api/search").then((resp) => {
      setSearchList(resp.data.searchList);
    });
  };
  const ss = (value: any) => {
    axios.get("/api/searchList", { params: { value } }).then((resp) => {
      let { code, items } = resp.data;
      if (code == 200) {
        setSearchList(items);
      } else {
        setSearchList(items);
      }
    });
  };
  useEffect(() => {
    render();
  }, []);
  return (
    <div className="searchbox">
      <div className="searchtop">
        <Search
          showAction
          label="<"
          actionText={<div onClick={() => ss(value)}>搜索</div>}
          value={value}
          onChange={setValue}
          placeholder="请输入搜索关键词"
        />
      </div>
      <div className="searchbtn">
        {searchList.length > 0 &&
          searchList.map((item) => (
            <div>
              <div>
                <img src={item.img} />
              </div>
              <div>{item.title}</div>
            </div>
          ))}
      </div>
    </div>
  );
};
export default Index;
